<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>JSONP</title>
  </head>
  <body>
    <script>
      // 1.JSONP 的原理
      // script 标签跨域不会被浏览器阻止
      // JSONP 主要就是利用 script 标签，加载跨域文件

      // 2.使用 JSONP 实现跨域
      // 服务器端准备好 JSONP 接口
      // https://www.imooc.com/api/http/jsonp?callback=handleResponse

      // 手动加载 JSONP 接口或动态加载 JSONP 接口
      const script = document.createElement('script');
      script.src =
        'https://www.imooc.com/api/http/jsonp?callback=handleResponse';
      document.body.appendChild(script);

      // 声明函数
      const handleResponse = data => {
        console.log(data);
      };

      // handleResponse({
      //   code: 200,
      //   data: [
      //     {
      //       word: 'jsp'
      //     },
      //     {
      //       word: 'js'
      //     },
      //     {
      //       word: 'json'
      //     },
      //     {
      //       word: 'js 入门'
      //     },
      //     {
      //       word: 'jstl'
      //     }
      //   ]
      // });

      // 优先使用 CORS，如果浏览器不支持 CORS 的话，再使用 JSONP
    </script>
    <!-- <script src="https://www.imooc.com/api/http/jsonp?callback=handleResponse"></script> -->
    <!-- 相当于 -->
    <!-- <script>
      handleResponse({
        code: 200,
        data: [
          {
            word: 'jsp'
          },
          {
            word: 'js'
          },
          {
            word: 'json'
          },
          {
            word: 'js 入门'
          },
          {
            word: 'jstl'
          }
        ]
      });
    </script> -->
  </body>
</html>
